<template>
  <div class="q-pa-md q-gutter-md">
    <t-list bordered padding class="rounded-borders" style="max-width: 350px">
      <t-item-label header>Folders</t-item-label>

      <t-item clickable v-ripple>
        <t-item-section avatar top>
          <t-avatar icon="folder" color="primary" text-color="white" />
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Photos</t-item-label>
          <t-item-label caption>February 22nd, 2019</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="info" color="green" />
        </t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section avatar top>
          <t-avatar icon="folder" color="orange" text-color="white" />
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Movies</t-item-label>
          <t-item-label caption>March 1st, 2019</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="info" />
        </t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section avatar top>
          <t-avatar icon="folder" color="teal" text-color="white" />
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Photos</t-item-label>
          <t-item-label caption>January 15th, 2019</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="info" />
        </t-item-section>
      </t-item>

      <t-separator spaced />
      <t-item-label header>Files</t-item-label>

      <t-item clickable v-ripple>
        <t-item-section avatar top>
          <t-avatar icon="assignment" color="grey" text-color="white" />
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Expenses spreadsheet</t-item-label>
          <t-item-label caption>March 2nd, 2019</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="info" />
        </t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section avatar top>
          <t-avatar icon="place" color="grey" text-color="white" />
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Places to visit</t-item-label>
          <t-item-label caption>February 22, 2019</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="info" color="amber" />
        </t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section avatar top>
          <t-avatar icon="library_music" color="grey" text-color="white" />
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">My favorite song</t-item-label>
          <t-item-label caption>Singing it all day</t-item-label>
        </t-item-section>

        <t-item-section side>
          <t-icon name="info" />
        </t-item-section>
      </t-item>
    </t-list>
  </div>
</template>
